<template>
	<view class="main_box">
		<view class="fix_title">
			4/8补充信息
		</view>
		<view class="txt">
			请确认并完善身份信息
		</view>
		<view class="form_box">
			<view class="inp">
				<view class="left">
					姓名
				</view>
				<view class="right">
					<input type="text" v-model.trim="userInfo.userName" maxlength="15">
				</view>
			</view>
			<view class="inp">
				<view class="left">
					证件类型
				</view>
				<view class="right">
					{{userInfo.type}}
				</view>
			</view>
			<view class="inp">
				<view class="left">
					身份证号
				</view>
				<view class="right">
					<input type="text" v-model.trim="userInfo.idNo" maxlength="18">
				</view>
			</view>
			<view class="inp">
				<view class="left">
					证件有效期
				</view>
				<view class="right">
					<input type="text" v-model.trim="userInfo.validDate">
				</view>
			</view>
			<view class="inp">
				<view class="left">
					性别
				</view>
				<view class="right">
					<input type="text" v-model.trim="h_sex" maxlength="1">
				</view>
			</view>
			<view class="inp">
				<view class="left">
					国籍
				</view>
				<view class="right">
					{{userInfo.nationality}}
				</view>
			</view>
			<view class="inp">
				<view class="left">
					职业
				</view>
				<view class="right_s" @click.stop="getTypeList">
					<view :class="userInfo.occupation!=='一 一 请选择职业 一 一'?'cg':'lg'">
						{{userInfo.occupation}}
					</view>
					<view class="rg">
						<image src="/static/images/blank/next.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="inp">
				<view class="left">
					联系地址
				</view>
				<view class="right_s" @click.stop="getAddressList">
					<view :class="userInfo.address!=='一 一 请选择地区 一 一'?'cg':'lg'">
						{{userInfo.address}}
					</view>
					<view class="rg">
						<image src="/static/images/blank/next.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="inp">
				<input type="text" v-model.trim="userInfo.particular" placeholder="请填写详细门牌地址">
			</view>
		</view>
		<view class="btn" @click.stop="toGetFace">
			下一步
		</view>
		<view class="kdn">
			<image src="/static/images/blank/4341yu.png" mode=""></image>
			<view class="subx">
				交通银行 提供产品服务
			</view>
		</view>
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content">
				<view class="busp">
					<view class="bLeft" @click.stop="cancelPuop">
						取消
					</view>
					<view class="bRight" @click.stop="equalValue">
						确认
					</view>
				</view>
				<view class="cardPicker">
					<view class="topNav2">
						<view :class="pastOff2==1?'active':'up'" @click="getProvince">
							{{province?province:'请选择'}}
						</view>
						<view :class="pastOff2==2?'active':'middle'" @click="getXian">
							{{xian?xian:'请选择'}}
						</view>
						<view :class="pastOff2==3?'active':'right'" @click="getArea">
							{{qu?qu:'请选择'}}
						</view>
					</view>
					<view v-show="pastOff2==1" class="rightContent">
						<scroll-view scroll-y="true" style="height:650rpx;" @touchmove.stop>
							<view class="king" v-for="(item,index) in provinceList" :key="index"
								@click="getOne(item,index)">
								<view class="txtLeft">
									{{item.cityName}}
								</view>
								<view v-if="item.flag" class="img">
									<image src="/static/images/blank/thegre.png" mode="scaleToFill">
									</image>
								</view>
								<view v-if="!item.flag" class="hidden">

								</view>
							</view>
						</scroll-view>
					</view>
					<view v-show="pastOff2==2" class="rightContent">
						<scroll-view scroll-y="true" style="height: 650rpx;" @touchmove.stop>
							<view class="king" v-for="(item,index) in xianList" :key="index"
								@click="getTwo(item,index)">
								<view class="txtLeft">
									{{item.cityName}}
								</view>
								<view v-if="item.flag" class="img">
									<image src="/static/images/blank/thegre.png" mode="scaleToFill">
									</image>
								</view>
								<view v-if="!item.flag" class="hidden">

								</view>
							</view>
						</scroll-view>
					</view>
					<view v-show="pastOff2==3" class="rightContent">
						<scroll-view scroll-y="true" style="height: 650rpx;" @touchmove.stop>
							<view class="king" v-for="(item,index) in quList" :key="index"
								@click="getThree(item,index)">
								<view class="txtLeft">
									{{item.cityName}}
								</view>
								<view v-if="item.flag" class="img">
									<image src="/static/images/blank/thegre.png" mode="scaleToFill">
									</image>
								</view>
								<view v-if="!item.flag" class="hidden">

								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</uni-popup>
		<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
		<view class="">
			<uni-popup ref="popup2" background-color="#fff" @change="change">
				<view class="popup-content">
					<view class="busp">
						<view class="bLeft" @click="cancelPuop2">
							取消
						</view>
						<view class="bRight" @click="equalValue2">
							确认
						</view>
					</view>
					<view class="cardPicker">
						<view class="topNav">
							<view :class="pastOff?'active':'up'" @click="getMain">
								{{xiangXiWork?xiangXiWork:'请选择'}}
							</view>
							<view :class="!pastOff?'active':'right'" @click="getDetailWork">
								{{work?work:'请选择'}}
							</view>
						</view>
						<view v-show="pastOff" class="rightContent">
							<scroll-view scroll-y="true" style="height: 650rpx;" @touchmove.stop>
								<view class="king" v-for="(item,index) in mainWorkList" :key="index"
									@click="getChild(item,index)">
									<view class="txtLeft">
										{{item.name}}
									</view>
									<view v-if="item.flag" class="img">
										<image src="/static/images/blank/thegre.png"
											mode="scaleToFill"></image>
									</view>
									<view v-if="!item.flag" class="hidden">

									</view>
								</view>
							</scroll-view>
						</view>
						<view v-show="!pastOff" class="rightContent">
							<scroll-view scroll-y="true" style="height: 650rpx;" @touchmove.stop>
								<view class="king" v-for="(item,index) in xiangXiList" :key="index"
									@click="getDetail(item,index)">
									<view class="txtLeft">
										{{item.name}}
									</view>
									<view v-if="item.flag" class="img">
										<image src="/static/images/blank/thegre.png"
											mode="scaleToFill"></image>
									</view>
									<view v-if="!item.flag" class="hidden">

									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import {
		getPhoneCode,
		getTwoUserList,
		putIdentity,
		personFace,
		getProvinceList,
		getCityList,
		getWorkList,
		getMainWorkList
	} from '../../common/api/blank.js';
	import {
		_showLoading,
		_showToast
	} from '../../common/js/util.js'
	export default {
		data() {
			return {
				show: false,
				userInfo: {
					userName: "",
					type: "居民身份证",
					idNo: "",
					validDate: "",
					genderTpCode: "1",
					nationality: "中国",
					occupation: "一 一 请选择职业 一 一", //职业
					address: "一 一 请选择地区 一 一", //联系地址
					particular: "", //门牌地址
				},
				fakeAddress: "",
				radioItems: [{
						name: '1',
						value: '男',
						checked: 'true'
					},
					{
						name: '2',
						value: '女'
					}
				],
				type: "bottom",
				value: [0, 0, 0],
				value2: [0, 0],
				visible: true,
				visible2: true,
				indicatorStyle: `height: 50px;`,
				qu: "",
				h_sex: "",
				h_liveAddress: "",

				pastOff2: 1,
				pastOff: true,

				xian: "",
				province: "",
				provinceList: [],
				xianList: [],
				quList: [],


				work: "",
				workCode: "",
				fakeWork: "",
				xiangXiWork: "",
				mainWorkList: [],
				xiangXiList: [],
			}
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false
			}
			this.back();
			return true
		},
		onLoad(option) {
			try {
				this.h_sex = uni.getStorageSync("sex")
				this.h_liveAddress = uni.getStorageSync("liveAddress")
				this.userInfo.userName = uni.getStorageSync("userName");
				this.userInfo.validDate = uni.getStorageSync("validDate")
				this.userInfo.idNo = uni.getStorageSync("idNo")
				if (this.h_sex) {
					this.userInfo.genderTpCode = this.h_sex
				}
			} catch (e) {
				// error
			}

		},
		components: {

		},
		methods: {
			//获取区
			getThree(item, index) {
				this.quList.forEach((items, indexs) => {
					items.flag = false
					this.$set(this.quList, indexs, items)
				})
				item.flag = true
				this.$set(this.quList, index, item)
				// console.log(item)
				this.qu = item.cityName
				this.fakeAddress = this.province + this.xian + this.qu
				// console.log(this.fakeAddress)
			},
			//获取市
			async getTwo(item, index) {
				// console.log(item)
				this.xianList.forEach((items, indexs) => {
					items.flag = false
					this.$set(this.xianList, indexs, items)
				})
				item.flag = true
				this.$set(this.xianList, index, item)
				this.xian = item.cityName
				const result = await getCityList({
					orgId: uni.getStorageSync("orgId")
				}, item.codeId)
				// console.log(result)
				if (result && result.length > 0) {
					this.quList = result
					this.quList.forEach((item, index) => {
						item.flag = false
					})
					this.pastOff2 = 3
				} else {
					this.quList = []
				}
			},
			//获取省
			async getOne(item, index) {
				this.province = item.cityName
				this.provinceList.forEach((items, indexs) => {
					items.flag = false
					this.$set(this.provinceList, indexs, items)
				})
				item.flag = true
				this.$set(this.provinceList, index, item)
				// console.log(item)
				if (this.provinceList.length > 0) {
					const res = await getCityList({
						orgId: uni.getStorageSync("orgId")
					}, item.codeId)
					if (res && res.length > 0) {
						this.xianList = res
						this.xianList.forEach((item, index) => {
							item.flag = false
						})
						this.pastOff2 = 2
						// console.log(this.xianList)
					} else {
						this.xianList = []
					}
				} else {}
			},
			//切换区
			getArea() {
				this.pastOff2 = 3
			},
			//切换市
			getXian() {
				this.pastOff2 = 2
			},
			//切换省
			getProvince() {
				this.pastOff2 = 1
			},
			//获取详细职业
			getDetail(item, index) {
				this.work = item.name
				this.xiangXiList.forEach((items, indexs) => {
					items.flag = false
					this.$set(this.xiangXiList, indexs, items)
				})
				item.flag = true
				this.$set(this.xiangXiList, index, item)
				this.workCode = item.codeId
				this.fakeWork = this.xiangXiWork + this.work
			},
			//获取职业分类
			async getChild(item, index) {
				this.mainWorkList.forEach((items, indexs) => {
					items.flag = false
					this.$set(this.mainWorkList, indexs, items)
				})
				item.flag = true
				this.$set(this.mainWorkList, index, item)
				this.xiangXiWork = item.name
				if (this.mainWorkList.length > 0) {
					const res = await getWorkList({
						orgId: uni.getStorageSync("orgId")
					}, item.codeId)
					if (res && res.length > 0) {
						this.xiangXiList = res
						this.xiangXiList.forEach((item, index) => {
							item.flag = false
						})
						// console.log(this.xiangXiList)
						this.pastOff = false
					} else {
						this.xiangXiList = []
					}
				} else {}
			},
			disabledScroll() {
				return
			},
			//切换详细职业
			getDetailWork() {
				this.pastOff = false
			},
			//切换职业分类
			getMain() {
				this.pastOff = true
			},
			back() {
				var pages = getCurrentPages();
				uni.navigateBack()
			},
			equalValue() {
				if (!this.province || !this.xian || !this.qu) {
					uni.showToast({
						icon: 'none',
						title: '请选择联系地址'
					})
				} else {
					this.userInfo.address = this.fakeAddress
					this.$refs.popup.close()
				}

			},
			equalValue2() {
				if (!this.xiangXiWork || !this.work) {
					uni.showToast({
						icon: 'none',
						title: '请选择职业'
					})
				} else {
					this.userInfo.occupation = this.fakeWork
					this.$refs.popup2.close()
				}
			},
			cancelPuop() {
				this.$refs.popup.close()
			},
			cancelPuop2() {
				this.$refs.popup2.close()
			},
			change(e) {
				this.show = e.show
				if (e.show) {
					this.flag = 1
				}
			},
			//获取地区
			async getAddressList() {
				this.$refs.popup.open('bottom')
				this.pastOff2 = 1
				const res = await getProvinceList({
					orgId: uni.getStorageSync("orgId")
				})
				if (res && res.length > 0) {
					this.provinceList = res
					this.provinceList.forEach((item, index) => {
						item.flag = false
					})
					if (this.province) {
						this.provinceList.forEach((item, index) => {
							if (item.cityName == this.province) {
								item.flag = true
								this.$set(this.provinceList, index, item)
							}
						})
					}
				} else {
					this.provinceList = []
				}
				// console.log(res)
			},
			//获取职业集合
			async getTypeList() {
				this.$refs.popup2.open('bottom')
				this.pastOff = true
				const res = await getMainWorkList({
					orgId: uni.getStorageSync("orgId")
				})
				if (res && res.length > 0) {
					this.mainWorkList = res
					this.mainWorkList.forEach((item, index) => {
						item.flag = false
					})
					if (this.xiangXiWork) {
						this.mainWorkList.forEach((item, index) => {
							if (item.name == this.xiangXiWork) {
								item.flag = true
								this.$set(this.mainWorkList, index, item)
							}
						})
					}
				} else {
					this.mainWorkList = []
				}
				// console.log(res)
			},
			//下一步
			toGetFace() {
				if (this.userInfo.occupation === '一 一 请选择职业 一 一' || this.userInfo.address === '一 一 请选择地区 一 一') {
					if (this.userInfo.occupation === '一 一 请选择职业 一 一') {
						_showToast("请选择职业")
						return
					}
					if (this.userInfo.address === '一 一 请选择地区 一 一') {
						_showToast("请选择地址")
						return
					}
				} else {
					if (this.h_sex !== '男' || this.h_sex !== '女') {
						// console.log(this.workCode)
						uni.navigateTo({
							url: `/pageBlank/affiliate/affiliate?cityName=${this.xian}&areaName=${this.province}&district=${this.qu}&workCode=${this.workCode}&idNo=${this.userInfo.idNo}&userName=${this.userInfo.userName}&liveAddress=${this.fakeAddress}`
						})
					} else {
						_showToast("性别只能为男女")
					}

				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.main_box {
		.kdn {
			margin: 86rpx 0rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			>image {
				width: 34rpx;
				height: 33rpx;
			}

			.subx {
				margin-left: 8rpx;
				height: 34rpx;
				font-size: 23rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #003A79;
				line-height: 34rpx;
			}
		}

		box-sizing: border-box;
		overflow-y: auto;

		::v-deep .picker-view {
			width: 100%;
			height: 500rpx;
			box-sizing: border-box;
			padding-top: 40rpx;

			picker-view-column {
				margin: 0 10rpx;
			}
		}

		.item {
			height: 50px;
			line-height: 50rpx;
			font-size: 24rpx;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.popup-content {
			height: 70%;
			background-color: #fff;
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			width: 100%;
			margin: 0rpx;
			display: flex;
			flex-direction: column;

			.cardPicker {
				flex: 1;

				.topNav2 {
					display: flex;

					.active {
						width: 30%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						font-size: 30rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: bolder;
						white-space: nowrap;
						overflow-x: hidden;
						text-overflow: ellipsis;
						padding: 0rpx 40rpx;
						border-bottom: 6rpx solid #3F9BFB;
						box-sizing: border-box;
					}

					.up {
						width: 33%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						font-size: 30rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: bolder;
						white-space: nowrap;
						overflow-x: hidden;
						text-overflow: ellipsis;
						padding: 0rpx 40rpx;
						box-sizing: border-box;
					}

					.middle {
						width: 33%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						font-size: 30rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: bolder;
						white-space: nowrap;
						overflow-x: hidden;
						text-overflow: ellipsis;
						padding: 0rpx 40rpx;
						box-sizing: border-box;
					}

					.right {
						width: 33%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						font-size: 30rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: bolder;
						white-space: nowrap;
						overflow-x: hidden;
						text-overflow: ellipsis;
						padding: 0rpx 40rpx;
						box-sizing: border-box;
					}
				}

				.topNav {
					display: flex;

					.active {
						width: 50%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						font-size: 30rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: bolder;
						white-space: nowrap;
						overflow-x: hidden;
						text-overflow: ellipsis;
						padding: 0rpx 40rpx;
						border-bottom: 6rpx solid #3F9BFB;
						box-sizing: border-box;
					}

					.up {
						width: 50%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						font-size: 30rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: bolder;
						white-space: nowrap;
						overflow-x: hidden;
						text-overflow: ellipsis;
						padding: 0rpx 40rpx;
						box-sizing: border-box;
					}

					.right {
						width: 50%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						font-size: 30rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: bolder;
						white-space: nowrap;
						overflow-x: hidden;
						text-overflow: ellipsis;
						padding: 0rpx 40rpx;
						box-sizing: border-box;
					}
				}

				.rightContent {
					height: calc(100% - 80rpx);

					.king {
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						margin-bottom: 10rpx;
						display: flex;
						padding: 0 40rpx;
						box-sizing: border-box;
						justify-content: space-between;
						align-items: center;

						.txtLeft {
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
						}

						.hidden {}

						.img {
							image {
								width: 28rpx;
								height: 22rpx;
							}
						}
					}
				}

			}

			.busp {
				display: flex;
				justify-content: space-between;

				.bLeft {
					width: 100rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
				}

				.bRight {
					width: 100rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
				}
			}
		}

		.popup-height {
			height: 100%;
			flex: 1;
			width: 200px;
			// background-color: green;
		}

		.form_box {
			display: flex;
			flex-direction: column;
			align-items: center;

			.inp {
				width: 650rpx;
				height: 87rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				opacity: 1;
				border: 2rpx solid #E6E6E6;
				display: flex;
				margin-bottom: 19rpx;

				input {
					width: 650rpx;
					height: 87rpx;
					box-sizing: border-box;
					padding-left: 21rpx;
					font-size: 28rpx;
				}

				.left {
					margin-left: 21rpx;
					width: 169rpx;
					height: 87rpx;
					line-height: 87rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #6E7077;
					text-align-last: justify
				}

				.right_s {
					display: flex;
					width: 430rpx;
					justify-content: space-between;
					align-items: center;
					margin-left: 23rpx;

					.cg {
						width: 100%;
						height: 87rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						line-height: 87rpx;
						white-space: nowrap;
						overflow-x: hidden;
						text-overflow: ellipsis;
					}

					.lg {
						width: 100%;
						height: 87rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #ACACAC;
						line-height: 87rpx;
						white-space: nowrap;
						overflow-x: hidden;
						text-overflow: ellipsis;

					}

					.rg {
						width: 50rpx;
						height: 87rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;

						image {
							width: 20rpx;
							height: 10rpx;
							margin-right: 33rpx;
						}
					}

				}

				.right {
					flex: 1;
					height: 87rpx;
					line-height: 87rpx;
					margin-left: 23rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;

					>input {
						width: 100%;
						height: 87rpx;
					}

					.uni-list {
						display: flex;

						.uni-list-cell {
							display: flex;
							align-items: center;
							margin-right: 10rpx;
						}
					}

				}
			}

			.inp:last-child {
				margin-bottom: 68rpx;
			}
		}

		.btn {
			width: 358rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #3478F5;
			box-shadow: 0rpx 3rpx 26rpx 1rpx rgba(55, 98, 244, 0.58);
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			opacity: 1;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Light, Source Han Sans CN;
			font-weight: 300;
			color: #FFFFFF;
			margin: 0 auto;
		}

		.fix_title {
			margin: 30upx 0 60upx 0;
			font-size: 40upx;
			font-weight: bolder;
			display: flex;
			align-items: center;
			margin-left: 10rpx;

			&::before {
				content: '';
				height: 36upx;
				width: 12upx;
				background-image: linear-gradient(to bottom, #c3defc, #007AFF);
				margin-right: 12upx;
				border-radius: 6upx;
			}
		}

		.txt {
			height: 46rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #020202;
			line-height: 46rpx;
			margin-bottom: 68rpx;
			margin-left: 32rpx;
			margin-top: 56rpx;
		}
	}
</style>